<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link href="../../resources/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />

    <script src="../../resources/lib/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../resources/lib/json2.js" type="text/javascript"></script>
    <script src="../../resources/lib/ligerui.all.js" type="text/javascript"></script>

    <script type="text/javascript">


        var DepartmentData = { Rows: [{ "TimeGroup": 1, "TimeGroupName": "时间1组" },
            { "TimeGroup": 2, "TimeGroupName": "时间2组" },
            { "TimeGroup": 3, "TimeGroupName": "时间3组" },
            { "TimeGroup": 4, "TimeGroupName": "时间4组"},
            { "TimeGroup": 5, "TimeGroupName": "时间5组"}], Total: 5 };

        var EmployeeData = { Rows: [{ "__status": null,
            "ID": 1,
            "GroupName": "工作日下午",
            "Week1":"true",
            "Week2":"true",
            "Week3":"true",
            "Week4":"false",
            "Week5":"true",
            "Week6":"true",
            "Week7":"true",
            "TimeAre": "00:00",
            "TimeAre1": "24:00" ,
            "TimeGroup": 3,
//            "RealName1": "国庆节",
            'Text2':"无",
            "StartDay": new Date(1301356800000),
            "EndtDay": new Date(1301356800000) },
            { "__status": null,
                "ID": 1,
                "GroupName": "工作日上午",
                "Week1":"true",
                "Week2":"true",
                "Week3":"true",
                "Week4":"false",
                "Week5":"true",
                "Week6":"true",
                "Week7":"true",
                "TimeAre": "00:00",
                "TimeAre1": "24:00" ,
                "TimeGroup": 1,
                'Text2':"无",
                "StartDay": new Date(1301356800000),
                "EndtDay": new Date(1301356800000) },
            { "__status": null,
                "ID": 1,
                "GroupName": "工作日中午",
                "Week1":"true",
                "Week2":"true",
                "Week3":"true",
                "Week4":"false",
                "Week5":"true",
                "Week6":"true",
                "Week7":"true",
                "TimeAre": "00:00",
                "TimeAre1": "24:00" ,
                "TimeGroup": 2,
                'Text2':"无",
                "StartDay": new Date(1301356800000),
                "EndtDay": new Date(1301356800000) }], Total: 3 };
        var DepartmentList = DepartmentData.Rows;
        var manager, g;
        $(function(){
            var weekRender = function(item, index, value) {
                return value ? "有效" : "无效";
            }
            g = manager = $("#maingrid").ligerGrid({
                columns: [
                    { display: '时间组', name: 'TimeGroup', width: 80, isSort: false,
                        editor: { type: 'select', data: DepartmentList, valueField: 'TimeGroup', textField: 'TimeGroupName' },
                        render: function (item) {
                            for (var i = 0; i < DepartmentList.length; i++) {
                                if (DepartmentList[i]['TimeGroup'] == item.TimeGroup)
                                    return DepartmentList[i]['TimeGroupName']
                            }
                            return item.TimeGroupName;
                        }
                    },
                    { display: '名称', name: 'GroupName', width: 100 ,
                        editor: { type: 'text' }
                    },
                    { display: '生效日期', name: 'StartDay', type: 'date', format: 'yyyy年MM月dd', width: 120, editor: { type: 'date'} },
                    { display: '失效日期', name: 'EndtDay', type: 'date', format: 'yyyy年MM月dd', width: 120, editor: { type: 'date'} },
                    { display: '开始时间', name: 'TimeAre', type: 'time', format: 'HH:mm:ss', width: 80, editor: { type: 'date',showTime:true} },
                    { display: '结束时间', name: 'TimeAre1', type: 'time', format: 'HH:mm:ss', width: 80, editor: { type: 'date',showTime:true} },
                    {display:'星期',name:'Week',columns:
                            [
                                { display: '一', name: 'Week1', width: 53, editor: { type: 'checkbox' }, render:weekRender},
                                { display: '二', name: 'Week2', width: 53 , editor: { type: 'checkbox' }, render:weekRender},
                                { display: '三', name: 'Week3', width: 53, editor: { type: 'checkbox' }, render:weekRender},
                                { display: '四', name: 'Week4', width: 53, editor: { type: 'checkbox' }, render:weekRender},
                                { display: '五', name: 'Week5', width: 53, editor: { type: 'checkbox' }, render:weekRender},
                                { display: '六', name: 'Week6', width: 53, editor: { type: 'checkbox' }, render:weekRender},
                                { display: '天', name: 'Week7', width: 53, editor: { type: 'checkbox' }, render:weekRender}
                            ]
                    },
                    { display: '备注', name: 'Text2',
                        editor: { type: 'text' }
                    }
                ],


                onSelectRow: function (rowdata, rowindex)
                {
                    $("#txtrowindex").val(rowindex);
                },
                enabledEdit: true,
                isScroll: false,
                rownumbers:true,
                data:EmployeeData,
                width: '100%'
            });
        });

        function deleteRow()
        {
            manager.deleteSelectedRow();
        }
        var newrowid = 100;
        function addNewRow()
        {
            manager.addEditRow();
        }
        function getSelected()
        {
            var row = manager.getSelectedRow();
            if (!row) { alert('请选择行'); return; }
            alert(JSON.stringify(row));
        }
        function getData()
        {
            var data = manager.getData();
            alert("保存成功");
        }
        function f_search()
        {
            grid.options.data = $.extend(true, {}, EmployeeData);
            grid.loadData(f_getWhere());
        }
        function f_getWhere()
        {
            if (!grid) return null;
            var clause = function (rowdata, rowindex)
            {
                var key = $("#txtKey").val();
                return rowdata.TimeGroup.indexOf(key) > -1;
            };
            return clause;
        }
    </script>
</head>
<body  style="padding:10px">
<a class="l-button" style="width:120px;float:left; margin-left:10px;" onclick="deleteRow()">删除时间组</a>
<a class="l-button" style="width:120px;float:left; margin-left:10px;" onclick="addNewRow()">添加时间组</a>
<a class="l-button" style="width:120px;float:left; margin-left:10px;" onclick="getData()">保存当前编辑</a>
<div id="searchbar">
    &nbsp 时间组：<input id="txtKey" type="text" />
    <input id="btnOK" class="l-button" type="button" value="搜索" onclick="f_search()" />
</div>
<div class="l-clear"></div>
<div id="maingrid" style="margin-top:20px"></div> <br />
</div>
</body>
</html>
